<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Tip 气泡框"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
  
    <demo-block title="基础用法">
      <p class="tip-eg">
        <hips-button
          type="primary"
          @click="$refs.tip.show()"
        >
          Show tip
        </hips-button>
        <hips-tip
          ref="tip"
          click-out-side-close
          closeable
          direction="bottom"
          style="left:105px;top:-50px;"
        >
          Tip
        </hips-tip>
      </p>
    </demo-block>

    <demo-block
      title="改变位置"
      class="my-block"
    >
      <p class="tip-eg">
        <hips-button
          type="primary"
          @click="showTip('top')"
        >
          Change Position
        </hips-button>
        <hips-tip
          ref="tip1"
          :direction="direction"
          :style="tipStyle"
          closeable
          click-out-side-close
          @close="close"
          @click="clickHandler"
        >
          <div>test!</div>
        </hips-tip>
      </p>
      <div class="my-flex">
        <hips-button @click="showTip('bottom')">
          top
        </hips-button>
        <hips-button @click="showTip('top')">
          bottom
        </hips-button>
        <hips-button @click="showTip('right')">
          left
        </hips-button>
        <hips-button @click="showTip('left')">
          right
        </hips-button>
      </div>
    </demo-block>

    <demo-block
      title="组合使用"
      class="my-block"
    >
      <p class="tip-eg">
        <hips-nav-bar title="标题">
          <div slot="right">
            <hips-icon
              name="add-o"
              style="margin-right:20px;"
              @click.native="$refs.tip2.show()"
            />
          </div>
        </hips-nav-bar>
        <hips-tip
          ref="tip2"
          direction="bottom"
          click-out-side-close
          style="left:220px;top:-125px;"
        >
          <div
            v-for="(item, index) in tips"
            :key="index"
            class="hips-thinline--bottom"
            style="padding: 10px;"
          >
            {{ item }}
          </div>
        </hips-tip>
      </p>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';

import { Tip, Button, NavBar,Icon } from '@hips/vue-ui';

export default {
  components: {
    [Tip.name]: Tip,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
  },
  mixins: [ BasicView ],
  data() {
    return {
      direction: '',
      tipStyle: '',
      tips: [
'tip1', 'tips2', 'tip3',
],
    };
  },
  methods: {
    showTip(direction) {
      this.direction = direction;
      this.$refs.tip1.show();

      switch (direction) {
        case 'top':
          this.tipStyle = 'left: 100px; top: 40px;';
          break;
        case 'bottom':
          this.tipStyle = 'left: 100px; top: -50px;';
          break;
        case 'left':
          this.tipStyle = 'left: 220px; top: 0px;';
          break;
        case 'right':
          this.tipStyle = 'left: -10px; top: 0px;';
          break;
      }
    },
    close() {
      console.log('click close button');
    },
    clickHandler() {
      console.log('click tip area');
    },
  },
};
</script>

<style scoped lang="stylus">
.tip-eg {
  position: relative;
  width: 300px;
  margin: 70px auto;
  text-align: center;
}

.my-block {
  .tip-eg {
    position: relative;
    width: 300px;
    margin: 70px auto;
    text-align: center;
  }

  .my-flex {
    display: flex;
    flex-direction: column;

    .hips-button {
      margin: 10px;
    }
  }
}
</style>
